<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <!-- Example Events -->
                    <div class="example-wrap">
                        <div class="example">
                            <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                <button type="button" class="btn btn-outline btn-default" data-toggle="modal"
                                        data-target="#addModal">
                                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-outline btn-default">
                                    <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-outline btn-default">
                                    <i class="glyphicon glyphicon-trash" aria-hidden="true" onclick="delAll()"></i>
                                </button>
                            </div>
                            <table id="rolesTable">
                            </table>
                        </div>
                    </div>
                    <!-- End Example Events -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>

<!-- 新增角色模态框-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加角色</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="addForm">
                    <div class="form-group">
                        <label for="rolename" class="col-sm-2 control-label">角色名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="rolename" name="name" placeholder="请输入名字"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-2 control-label">详细说明</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="description" name="description"
                                   placeholder="请输入说明" required>
                        </div>
                    </div>

                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="available">是否可用: <span
                                class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <select name="available" id="available" required="required"
                                    class="form-control col-md-7 col-xs-12">
                                <option value="">请选择</option>
                                <option value="0">不可用</option>
                                <option value="1" selected="selected">可用</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="add()">添加</button>
            </div>
        </div>
    </div>
</div>


<!-- 角色分配权限模态框-->
<div class="modal fade" id="assignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="assignModalLabel">分配权限</h4>
            </div>
            <div class="modal-body">
                <!--选中角色id-->
                <input type="hidden" id="rid">
                <ul id="privsMenu" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="assign()">分配</button>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootbox.all.min.js"></script>
<script type="text/javascript" src="/js/jquery.ztree.all.js"></script>
<link rel="stylesheet" href="/css/zTreeStyle/zTreeStyle.css"/>

<!-- 自定义js -->
<script src="/js/content.js?v=1.0.0"></script>

<!--toastr提示组件-->
<link href="/css/toastr.min.css" rel="stylesheet"/>
<script src="/js/toastr.min.js"></script>

<!-- Bootstrap table -->
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="/js/demo/bootstrap-table-demo.js"></script>
<script src="/js/zTreeUtils.js"></script>
<script>
    //提示信息显示的位置
    toastr.options.positionClass = 'toast-bottom-center';

    function operateFormatter(code, row, index) {
        var operateBtn = [
            '<a class="btn btn-xs btn-primary btn-update" id="edit"><i class="fa fa-edit"></i>编辑</a>',
            '<a class="btn btn-xs btn-danger btn-remove" id="del"><i class="fa fa-trash-o"></i>删除</a>',
            '<a class="btn btn-xs btn-info btn-allot"  id="assign"><i class="fa fa-circle-thin"></i>分配权限</a>'
        ];
        return operateBtn.join('');
    }

    //绑定事件
    window.operateEvents = {
        "click #edit": function (e, value, row, index) {
            edit(row);
        },
        "click #del": function (e, value, row, index) {
            del(row);
        },
        "click #assign": function (e, value, row, index) {
            toAssign(row);
        }
    }


    $(function () {
            $('#rolesTable').bootstrapTable({
                url: "/roles",//请求数据url
                //提交到服务器端的参数
                queryParams: function (params) {
                    //这里的键的名字和前端控制器接收的变量名必须一致
                    var temp = {
                        curPage: params.pageNumber,
                        pageSize: params.pageSize
                    };
                    return temp;
                },
                //返回数据处理
                responseHandler: function responseHandler(res) {
                    return {
                        "rows": res.list, // 具体每一个bean的列表
                        "total": res.total // 总共有多少条返回数据
                    }
                },
                showHeader: true,
                showColumns: true,
                showRefresh: true,
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sortStable: true,                  // 设置为 true 将获得稳定的排序
                queryParamsType: '',
                search: true,                       //是否启用搜索框 根据sidePagination选择从前后台搜索
                strictSearch: true,                 //设置为 true启用 全匹配搜索，否则为模糊搜索
                searchOnEnterKey: true,
                pagination: true,//分页
                sidePagination: 'server',//服务器端分页
                pageNumber: 1,
                pageSize: 2,
                pageList: [5, 10, 20, 50],//分页步进值
                search: true,//显示搜索框
                //表格的列
                columns: [
                    {
                        field: 'state',//域值
                        checkbox: true
                    },
                    {
                        field: 'name',//域值
                        title: '角色名',//标题
                        visible: true,//false表示不显示
                        sortable: true,//启用排序
                        width: '20%',
                        editable: true,
                    },
                    {
                        field: 'description',//域值
                        title: '描述',//内容
                        visible: true,//false表示不显示
                        sortable: true,//启用排序
                        width: '30%',
                        editable: true,
                    },
                    {
                        field: 'available',
                        title: '是否可用',
                        editable: true,
                        formatter: function (code) {
                            return code ? '可用' : '不可用';
                        }
                    },
                    {
                        field: 'id',//域值
                        title: '操作',//内容
                        visible: true,//false表示不显示
                        sortable: true,//启用排序
                        width: '20%',
                        formatter: operateFormatter,
                        events: 'operateEvents'
                    }
                ]
            });
        }
    )

    function add() {
        $.ajax({
            url: '/roles',
            method: "post",
            dataType: "json",
            data: $('#addForm').serialize(),
            success: function (res) {
                if (res) {
                    toastr.success('添加成功');
                    $('#addModal').modal('hide');
                    $('#rolesTable').bootstrapTable('refresh');
                }
            },
            error: function () {

            }
        })
    }

    //删除多行
    function delAll() {
        //通过js获取被选中的数据行
        var rows = $('#rolesTable').bootstrapTable('getSelections');
        console.log(rows[0].id)
    }

    function edit(row) {
        console.log(row);
    }

    function del(row) {
        bootbox.confirm({
            message: '确定删除该行数据?',
            buttons: {
                confirm: {
                    label: '确定',
                    className: 'btn-info'
                },
                cancel: {
                    label: '取消',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
                if (result) {
                    $.ajax({
                        url: '/roles/' + row.id,
                        method: 'DELETE',
                        success: function (res) {
                            if (res) {
                                toastr.success('删除成功');
                                $('#rolesTable').bootstrapTable('refresh');
                            }
                        },
                        error: function () {

                        }
                    })
                }
            }
        });


    }

    function toAssign(row) {
        $('#assignModal').modal('show');
        //回显
        $("#rid").val(row.id);
        $.ajax({
            url: "/resources/all",
            success: function (res) {
                if (res) {
                    $.fn.zTree.init($("#privsMenu"), setting, res);
                    $.ajax({
                        url:'/resources/pids/'+row.id,
                        success:function (res){
                            deSelectAll('privsMenu',res);
                        }
                    });
                }
            }
        });

    }

    function assign() {
        let pids = getSelectedNodes('privsMenu');
        let rid = $("#rid").val();
        $.ajax({
            url:'/resources',
            method:'PUT',
            data:{
                'rid':rid,
                'pids':pids
            },
            traditional: true,
            dataType:"json",
            success:function(res){
                if(res){
                    toastr.success('分配权限成功');
                }else{
                    toastr.error('分配权限失败');
                }
                $('#assignModal').modal('hide');
            }
        });
    }

    var setting = {
        view:{
            showLine: false
        },
        data: {
            simpleData: {
                enable: true, //支持json格式
                idKey: "id",
                pIdKey: "pid"
            }
        },
        check:{//表示tree的节点在点击时的相关设置
            enable:true,//是否显示radio/checkbox
            chkStyle:"checkbox",//值为checkbox或者radio表示
            checkboxType:{p:"",s:""},//表示父子节点的联动效果
            radioType:"level"//设置tree的分组
        }
    }
</script>
</body>

</html>
